<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/jspcommon.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>果果街</title>
<link href="css/login_css/login.css" rel="stylesheet" type="text/css" />
<link href="css/login_css/public.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link href="css/home_css/home.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=basePath%>js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/jquery.validate.js"></script>
<script type="text/javascript" src="<%=basePath%>js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/jquery.ba-hashchange.js"></script>
<script type="text/javascript" src="<%=basePath%>js/common.js"></script>
<style type="text/css">
	label.error{
		background-image:url("images/login_images/cuowu.jpg");
		font-size: 12px;
		background-repeat: no-repeat;
		padding-left: 15px;
		line-height: 15px;
		margin-left: 3px;
	}
	label.validate_success{
		background-image:url("images/login_images/zhengque.gif");
		margin-left: 3px;
	}
	
</style>
<script type="text/javascript">

	$(function() {
		//表单验证使用属性validate进行验证
		$.metadata.setType("attr","validate");
		$("#memberForm").validate({
			success: function(label) {
				label.text("").addClass("success");
			},
			rules: {
				username: {
					required: true,
					maxlength: 5,
					chinese:5,
					minlength:2
				},
				email:{
					required: true,
					email:true,
					remote: 'checkEmail.ajax'
				},
				password:{
					required: true,
					minlength:6,
					maxlength:20,
					remote:'checkPassword.ajax'
				},
				confirm_password:{
					equalTo:'#password'
				},
				agree:{
					required:true
				}
				
			},
			messages: {
				username: {
					required:	"请填写你的真实姓名",
					minlength: "请填写2个以上中文名",
					maxlength: "请填写5个以下中文名",
					chinese: "请填写你的中文名"
				},
				email:{
					required: "请填写邮箱",
					email:"请填写正确的邮箱地址",
					remote: "该邮箱已被注册"
				},
				password:{
					required: "请填写密码",
					minlength:"密码不足6位，重新输入",
					maxlength:"密码不超过20位",
					remote:"密码不能和户主相同"
				},
				confirm_password:{
					equalTo:'2次密码输入不符'
				},
				agree:{
					required:'请接受服务条款'
				}
				
				
			},
			submitHandler: function(form) {
				$(".button2").attr("disabled",true);
				form.submit();
			}
		});
	});


	//根据下拉框选择钥匙
	function sameKey(){
		var key = $("#isSameKey").val();
		if(key=="same"){
			$("#removePassword").remove();
			$("#removeConfirm_password").remove();
		}else{
			$("#add_member").after($("#key_not_Same").val());
		}
	}
	
</script>
</head>

<body>

	<div class="box">

		<div class="head">
			<div class="logo">
				<img src="images/login_logo.gif" />
			</div>
			<div class="login_enter">
				<a href="enterRegister.ajax" title="注册">建家（注册）</a> | <a href="enterLogin.ajax" title="登录">回家（登录）</a>
			</div>
			<div class="clear"></div>
		</div>


		<div class="content">
			<div class="login_title">欢迎在果果街建家，请在下面填写您的基本信息。</div>
			<div class="login_forms">
				<form action="addMember.htm" method="post" id="memberForm">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td align="right">&nbsp;</td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td width="151" align="right">家庭角色：</td>
							<td width="362"><table width="100%" border="0"
									cellspacing="0" cellpadding="0">
									<tr>
										<c:forEach items="${roleList}" var="roleTmp">
											<td width="6%"><input checked="checked" name="role" value="${roleTmp.value}"  type="radio" />
											</td>
											<td width="20%"><c:out value="${roleTmp.label}"/></td>
										</c:forEach>
										
										<td></td>
										<td></td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td align="right">邮箱：</td>
							<td><input class="inputText" type="text" name="email" id="email" />
							</td>
						</tr>
						<tr>
							<td align="right">用户名：</td>
							<td><input class="inputText" type="text" name="username" id="username" />
							</td>
						</tr>
						<tr id="add_member">
							<td align="right">钥匙：</td>
							<td id="isHostKey">
								<select id="isSameKey" onchange="sameKey()">
									<option value="same">和户主使用同一把钥匙</option>
									<option value="notSame">自己创建钥匙</option>
								</select>
							</td>
						</tr>
						<tr>
							<td align="right"><input type="checkbox" name="agree" id="agree" />
							</td>
							<td>已经认真阅读并同意果果街的<a class="ys3" href="#">《使用协议》</a>&nbsp;<label for="agree" generated="true" class="error" style="display: none;" >请选择同意协议</label>
							</td>
						</tr>
						<tr>
							<td align="right">&nbsp;</td>
							<td><input class="button2" type="submit" value="" />
							</td>
						</tr>
					</table>
				</form>
			</div>
			<div class="login_notice">
				<div class="title">注册果果街的好处</div>
				<div class="attention">入住果果街，找到你家的小区邻居、亲友家庭，关注他们的动态</div>
				<div class="group">组建家庭圈子，共同活动、结伴出行、快乐生活</div>
				<div class="recommend">得到果果育儿、日志、相册、生活日历等家庭服务和实用软件</div>
				<div class="title">已经是果果街用户了？</div>
				<div class="title">
					<a href="enterLogin.ajax">那就回家（登录）吧>></a>
				</div>
				<div class="difficulty">
					有困难，<a href="contact.ajax">联系我们>></a>
				</div>


			</div>
			<div class="clear"></div>
		</div>
	</div>
	<%-- 尾部 --%>
	<div class="foot">
	<div class="w960" ><%@include file="../common/footer.jsp"%></div>
	</div>
<textarea id="key_not_Same" style="display: none;">
	<tr id="removePassword">
		<td align="right">钥匙：</td>
		<td><input class="inputText" type="password" id="password" name="password"/></td>
	</tr>
	<tr id="removeConfirm_password">
		<td align="right">重复钥匙：</td>
		<td><input class="inputText" type="password" id="confirm_password" name="confirm_password" /></td>
	</tr>
</textarea>
</body>
</html>
